import { useState, useEffect, useRef } from 'react';

function UseRefComp2() {
  let timer = useRef(null);
  const [counter, setCounter] = useState(1);

  useEffect(() => {
    timer.current = setInterval(() => {
        console.log(timer.current)
      console.log('触发了');
    }, 1000);
  },[]);

  const clearTimer = () => {
    console.log('停止',timer.current)
    clearInterval(timer.current);
  }

  function clickHandle(){
    console.log(timer);
    setCounter(counter + 1);
  }

  return (
    <>
    <h3>*useRef* 还接受一个初始值，这在用作关联 *DOM* 元素时通常没什么用，但是在作为**存储不需要变化**的全局变量时则非常方便。</h3>
      <div>{counter}</div>
      <button onClick={clickHandle}>+1</button>
      <button onClick={clearTimer}>停止</button>
    </>)
}

export default UseRefComp2;